<template>
  <div ref="container">
    <breadcrumb :breadList="breadList" :name="name">
      <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn" @click="exportList">导出列表</a-button>
        </div>
      </div>
    </breadcrumb>
    <a-card>
      <a-form @submit="handleSubmit" :form="form">
        <a-row clss="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="年限" :labelCol="{lg: {span: 4}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
              <a-select v-decorator="['queryParam.year', {initialValue: 1, rules: [{required: false, message: ''}]}]" style="width: 100%;">
                <a-select-option :value="1">2017年以前</a-select-option>
                <a-select-option :value="2">2017</a-select-option>
                <a-select-option :value="3">2018</a-select-option>
                <a-select-option :value="4">2019</a-select-option>
                <a-select-option :value="5">2020</a-select-option>
                <a-select-option :value="6">2021</a-select-option>
                <a-select-option :value="7">2022</a-select-option>
                <a-select-option :value="8">2023</a-select-option>
                <a-select-option :value="9">2024</a-select-option>
                <a-select-option :value="10">2025</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="项目名称" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-textarea v-model="queryParam.proName" rows="1" placeholder="项目名称" style="width: 100%;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="12" :sm="24">
            <a-form-item label="" :colon="false">
              <a-button class="common-btn" @click="toSearch('2')">查询</a-button>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="12" :sm="24">
            <a-form-item label="" :colon="false">
              <a-button class="common-btn" @click="$refs.advSearchModel.add('')">高级搜索</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <adv-search-model ref="advSearchModel" @closeModel="closeModel"></adv-search-model>
      </a-form>
    </a-card>
    <a-card>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="按区域统计" key="1">
          <table border="1" cellpadding="12">
            <tbody>
              <tr style="text-align:center;">
                <th colspan="1">改造年代</th>
                <th colspan="1">行政区域</th>
                <th colspan="1">用户类型</th>
                <th colspan="2">计划完成</th>
                <th colspan="2">实际完成</th>
                <th colspan="1">用户完成率</th>
                <th colspan="1">面积完成率</th>
              </tr>
              <tr>
                <td rowspan="9">2016</td>
                <td rowspan="3">小店区</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td rowspan="3">阳曲县</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td rowspan="3">总计</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
            </tbody>
          </table>
          <table border="1" cellpadding="24" style="margin:20px 0;">
            <tr>
              <td rowspan="9">合计</td>
              <td>居民</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
            <tr>
              <td>非居民</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
            <tr>
              <td>总计</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
          </table>
        </a-tab-pane>
        <a-tab-pane tab="按路径统计" key="2">
          <table border="1" cellpadding="12">
            <tbody>
              <tr style="text-align:center;">
                <th colspan="1">改造年代</th>
                <th colspan="1">清洁路径</th>
                <th colspan="1">用户类型</th>
                <th colspan="2">计划完成</th>
                <th colspan="2">实际完成</th>
                <th colspan="1">用户完成率</th>
                <th colspan="1">面积完成率</th>
              </tr>
              <tr>
                <td rowspan="9">2016</td>
                <td rowspan="3">煤改电</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td rowspan="3">煤改气</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td rowspan="3">总计</td>
                <td>居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>非居民</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>29800户</td>
                <td>3398000平米</td>
                <td>100%</td>
                <td>100%</td>
              </tr>
            </tbody>
          </table>
          <table border="1" cellpadding="24" style="margin:20px 0;">
            <tr>
              <td rowspan="9">合计</td>
              <td>居民</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
            <tr>
              <td>非居民</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
            <tr>
              <td>总计</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>29800户</td>
              <td>3398000平米</td>
              <td>100%</td>
              <td>100%</td>
            </tr>
          </table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
import AdvSearchModel from './advSearchModel'
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'SupplierManagementList',
  components: {
    Breadcrumb,
    AdvSearchModel
  },
  data () {
    return {
      name: '',
      breadList: [],
      loading: false,
      tabKey: '',
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 表头
      areaColumns: [
        {
          title: '改造年度',
          width: '10%',
          dataIndex: 'year'
        }, {
          title: '行政区域',
          width: '10%',
          dataIndex: 'area'
        }, {
          title: '用户类型',
          width: '10%',
          dataIndex: 'type'
        }, {
          title: '计划完成（户）',
          width: '10%',
          dataIndex: 'planUser'
        }, {
          title: '计划完成（m²）',
          width: '10%',
          dataIndex: 'planArea'
        },
        {
          title: '实际完成（户）',
          width: '10%',
          dataIndex: 'realityUser'
        },
        {
          title: '实际完成（m²）',
          width: '10%',
          dataIndex: 'realityArea'
        },
        {
          title: '用户完成率',
          width: '10%',
          dataIndex: 'userRate'
        },
        {
          title: '面积完成率',
          width: '10%',
          dataIndex: 'areaRate'
        }
      ],
      pathColumns: [
        {
          title: '改造年度',
          width: '10%',
          dataIndex: 'year'
        }, {
          title: '清洁路径',
          width: '10%',
          dataIndex: 'path'
        }, {
          title: '用户类型',
          width: '10%',
          dataIndex: 'type'
        }, {
          title: '计划完成（户）',
          width: '10%',
          dataIndex: 'planUser'
        }, {
          title: '计划完成（m²）',
          width: '10%',
          dataIndex: 'planArea'
        },
        {
          title: '实际完成（户）',
          width: '10%',
          dataIndex: 'realityUser'
        },
        {
          title: '实际完成（m²）',
          width: '10%',
          dataIndex: 'realityArea'
        },
        {
          title: '用户完成率',
          width: '10%',
          dataIndex: 'userRate'
        },
        {
          title: '面积完成率',
          width: '10%',
          dataIndex: 'areaRate'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadDataArea: [],
      loadDataPath: []
    }
  },
  created () {
    this.loading = true
    this.getBreadCrumb()
    setTimeout(() => {
      this.getData('1')
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    getData (code) {
      const dataArea = [
        {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '人，要么庸俗，要么孤独'
        }, {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '越美丽的东西我越不可碰'
        }, {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '是否你也会在人潮拥挤的街头,寻寻觅觅,期盼相遇在夕阳斜斜的乌衣巷口'
        }, {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '过去了就是昨天,新的一页翻开还是晴朗的天'
        }, {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '希望的灯一旦熄灭,生活刹那间变成了一片黑暗'
        }, {
          year: '2019',
          area: '小店区',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '人生的起起落落间,总会有一些情怀需要安静回味'
        }
      ]
      const dataPath = [
        {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '人，要么庸俗，要么孤独'
        }, {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '越美丽的东西越不可碰'
        }, {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '是否你也会在人潮拥挤的街头,寻寻觅觅,期盼相遇在夕阳斜斜的乌衣巷口'
        }, {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '过去了就是昨天,新的一页翻开还是晴朗的天'
        }, {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '希望的灯一旦熄灭,生活刹那间变成了一片黑暗'
        }, {
          year: '2019',
          path: '煤改电',
          type: '居民',
          planUser: '999999',
          planArea: '18899999999',
          realityUser: '999999',
          realityArea: '18899999999',
          userRate: '100%',
          areaRate: '100%',
          remark: '人生的起起落落间,总会有一些情怀需要安静回味'
        }
      ]
      if (code === '1') {
        this.loadDataArea = dataArea
        this.loadDataPath = dataPath
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loadDataArea = dataArea
        this.loadDataPath = dataPath
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '查询成功'
          })
        }, 1000)
      }
    },
    toSearch (status) {
      this.loading = true
      this.getData(status)
    },
    exportList () {
      this.$success({
        title: '导出成功'
      })
    },
    handleSubmit () {
      console.log('ttt')
    },
    closeModel () {
      this.$success({
        title: '查询成功'
      })
    },
    callback (key) {
      console.log(key)
      this.tabKey = key
    },
    go_toOperation (type, record) {
      console.log('========', record)
      if (type !== 'create' && type !== 'modify') {
        this.$router.push({
          name: 'proDetails',
          query: {
            proDetails: JSON.stringify(record)
          }
        })
      } else {
        this.$router.push({
          name: 'addProjects',
          query: {
            type: type,
            proDetails: JSON.stringify(record)
          }
        })
      }
    }
  }
}

</script>

<style lang="less" scoped>
// .handle-box {
//   display: flex;
//   margin-bottom: 10px;
//   margin-left: 800px;
// }
// .handle-btn {
//   margin-left:5px;
// }
</style>
